<template>
	<view class="u-page coreshop-flex coreshop-flex-direction">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<!-- 自定义tabbar -->
		<u-navbar :title="title" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="coreshop-flex coreshop-flex-direction search-box">
			<view class="search-input">
				<u-search v-model="keyword" @custom="goSearch" :clearabled="false" placeholder="请输入标题关键词" height="38"
					:searchIcon="null" bgColor="#F1F1F5" placeholderColor="#A2A6AC"
					:actionStyle="{width:'130rpx',height:'78rpx',background:'#2A8FFC','border-radius':'25px','margin-left':'20rpx','font-size':'28rpx',color:'#fff','line-height':'80rpx','text-align':'center'}">
				</u-search>
			</view>
			<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-around" style="height: 80rpx;">
				<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-center coreshop-align-center"
					@click="funSelect(1)">
					<u--text :type="clickVal==1 ? 'primary' :''" :text="JHZT ==1 ?'已完成' : '未完成'"></u--text>
					<u-icon :name="[(clickVal==1 && selectPopShow) ? 'arrow-up':'arrow-down']"
						:color="clickVal==1 ? '#2A8FFC' :'#606266'" size="14" bold="true"></u-icon>
				</view>
				<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-center coreshop-align-center"
					:class="{ disabled: isDisabled }" @click="funSelect(1)">
					<view><u--text :type="clickVal==2 ? 'primary' :''" :text="jhText"></u--text> </view>
					<view><u-icon :name="[(clickVal==2 && selectPopShow) ? 'arrow-up':'arrow-down']"
							:color="clickVal==2 ? '#2A8FFC' :'#606266'" size="14" bold="true"></u-icon></view>
				</view>
				<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-center coreshop-align-center"
					@click="funSelect(3)">
					<u--text :type="clickVal==3 ? 'primary' :''" text="计划时间"></u--text>
					<u-icon :name="[(clickVal==3 && selectPopShow) ? 'arrow-up':'arrow-down']"
						:color="clickVal==3 ? '#2A8FFC' :'#606266'" size="14" bold="true"></u-icon>
				</view>
				<view class="coreshop-flex coreshop-flex-direction-row coreshop-justify-center coreshop-align-center"
					@click="funSelect(4)">
					<u--text :type="clickVal==4 ? 'primary' :''" text="完成时间"></u--text>
					<u-icon :name="[(clickVal==4 && selectPopShow) ? 'arrow-up':'arrow-down']"
						:color="clickVal==4 ? '#2A8FFC' :'#606266'" size="14" bold="true"></u-icon>
				</view>
			</view>
			<u-line></u-line>
			<view class="coreshop-flex coreshop-flex-direction" v-show="selectPopShow"
				style="background-color: #F7F7F7;z-index: 1000;">
				<template v-if="clickVal==1">
					<view class="coreshop-flex coreshop-flex-direction-row c-m-l-20 c-m-r-20" style="height: 80rpx;"
						@click="funSubSelect(1)">
						<u--text text="已完成" :type="selectVal==1 ? 'primary' :''"></u--text>
						<u-icon v-if="selectVal==1" name="checkbox-mark" color="#2A8FFC" size="20" bold="true"></u-icon>
					</view>
					<u-line></u-line>
					<view class="coreshop-flex coreshop-flex-direction-row c-m-l-20 c-m-r-20" style="height: 80rpx;"
						@click="funSubSelect(2)">
						<u--text text="未完成" :type="selectVal==2 ? 'primary' :''"></u--text>
						<u-icon v-if="selectVal==2" name="checkbox-mark" color="#2A8FFC" size="20" bold="true"></u-icon>
					</view>
				</template>
				<template v-if="clickVal==3 || clickVal==4">
					<u-line></u-line>
					<view class="coreshop-flex coreshop-flex-direction-row c-m-l-20 c-m-r-20" style="height: 80rpx;"
						@click="selectDate(1)">
						<u--text text="全部" :type="selectVal==3 ? 'primary' :''"></u--text>
						<u-icon v-if="selectVal==3" name="checkbox-mark" color="#2A8FFC" size="20" bold="true"></u-icon>
					</view>
					<u-line></u-line>
					<view class="coreshop-flex coreshop-flex-direction-row c-m-l-20 c-m-r-20" style="height: 80rpx;"
						@click="selectDate(2)">
						<u--text text="自定义" :type="selectVal==4 ? 'primary' :''"></u--text>
						<u-icon v-if="selectVal==4" name="checkbox-mark" color="#2A8FFC" size="20" bold="true"></u-icon>
					</view>
				</template>
				<u-line></u-line>
			</view>
		</view>
		<scroll-view class="content" scroll-y @scrolltolower="scrollBottom" style="position: absolute;top: 400rpx;"
			:class="[selectPopShow ? cardNoneClass:cardShowClass]">
			<view class="select-tag" v-if="planDateVal.length>0">当前选中计划时间:{{planDateVal[0]}}~{{planDateVal[1]}}</view>
			<view class="select-tag" v-if="finishDateVal.length>0">当前选中完成时间:{{finishDateVal[0]}}~{{finishDateVal[1]}}
			</view>
			<view style="content:''; overflow: hidden;"></view>
			<block v-for="(item,index) in List" :key="index">
				<view class="coreshop-flex coreshop-flex-direction uCard" @click="goDetail(item.id,planType)">
					<view slot="head" class="list-head">
						<view class="head-title">{{item.gzjh}} <text class="complete-num"
								v-if="FBZT == '1' && planType==1">({{item.complete}})</text></view>
						<view class="head-time">最近修改时间：{{$common.longDateFormate(item.chgTime) || '--'}}</view>
					</view>
					<u-line></u-line>
					<view slot="body"
						class="coreshop-flex coreshop-flex-direction-row coreshop-justify-between list-body">
						<view class="coreshop-flex coreshop-flex-direction-column coreshop-align-start">
							<view class="coreshop-flex">
								<view class="list-content coreshop-flex-sub">
									<view class="plan-info">{{item.jhxq.jhfl || ''}}</view>
									<view class="plan-info">{{item.jhxq.jhxq || ''}}</view>
								</view>
							</view>
							<view class="coreshop-flex c-m-t-20">
								<u-tag plain :text="getLabelFromID(item.jhlx) || '--'" size="mini" shape="circle"
									mode="plain" color="#2A8FFC" border-color="#2A8FFC" />
								<u-icon name="chat-fill" custom-prefix="custom-icon" color="#C0C0C0" size="18"
									:custom-style="{'margin-left':'24rpx','margin-top':'4rpx'}">
								</u-icon>
								<view class="msg-num c-m-t-4">{{item.reviewSum}}</view>
							</view>
						</view>
						<view class="coreshop-flex">
							<u-icon name="arrow-right" custom-prefix="custom-icon" color="#E5E5E5" size="20">
							</u-icon>
						</view>
					</view>
					<!-- 	<view slot="foot"> 
						发布人：{{ item.addAccName }}
					</view> -->
				</view>
			</block>

			<view class="over-hidden">
				<u-loadmore :status="listStatus" margin-top="40" margin-bottom="40" />
			</view>

		</scroll-view>

		<w-picker :visible.sync="visible" mode="range" startYear="2000" endYear="2030" :value="rangeVal"
			:current="false" @confirm="onConfirm($event)" @cancel="onCancel" ref="range"></w-picker>

		<navigator class="coreshop-flex coreshop-justify-center add-btn"
			:url="`/packagePlan/pages/addPlan/index?plantype=${JHLX}`" v-if="disabledType">
			<u-icon name="plus" color="#fff" size="20" bold="true"></u-icon>
		</navigator>

	</view>
</template>

<script>
	//  import { mapState, mapGetters, mapActions } from 'vuex'
	import wPicker from "@/pages/member/agent/components/w-picker/w-picker.vue"

	export default {
		data() {
			return {
				isDisabled: true,
				selectPopShow: false,
				clickVal: 0,
				selectVal: 0,
				jhText: '周计划',

				cardShowClass: 'cardShow',
				cardNoneClass: 'cardNone',

				planType: '1', //1.发布计划 2.关联计划 4.评阅计划
				FBZT: 1, //计划是否已发布
				typeList: [],
				JHLX: 0,

				disabledType: false, //禁止选择计划类型

				keyword: '', //关键词
				List: [], //列表
				listCount: 0, //总数
				pageNum: 1,
				pageSize: 20,
				listStatus: 'nomore',
				searchData: {
					where: {},
					limit: 20,
					page: 1
				},

				dropIdx: '', //当前选中的时间类型
				rangeVal: [], //默认数据
				visible: false,
				finishCur: '',
				finishDateVal: [],
				planCur: '',
				planDateVal: [],

				JHZT: 1,
				subList: [], //下属列表
				userData: {},

				BMID: '', //部门id
				YWYID: '', //用户id
				title: ''
			}
		},
		components: {
			wPicker,
		},
		computed: {
			// ...mapState(['positionList','subdepartmentList']),
			typeName: function() {
				const n = this.JHLX;
				if (n) {
					return this.typeList.find(item => item.value == n).label
				}
				return '计划类型'
			}
		},
		onLoad(e) {
			this.typeList = this.$db.get('workPlanType');
			this.typeList.push({
				label: '全部',
				value: 0,
			});
			console.log(e)
			let title = '我发布的计划';
			if (e.planAuth) {
				this.planType = e.planAuth;
				e.planAuth == '2' && (title = '我收到的计划');
				e.planAuth == '4' && (title = '评阅计划');
			}
			if (e.draft) {
				this.FBZT = 0;
				title = '草稿箱';
			}

			//年 周 月 直接跳转
			if (e.planClass) {
				let planclass = Number(e.planClass)
				this.JHLX = planclass;
				const planClassInfo = {
					2: '周计划',
					3: '月计划',
					4: '年计划',
					7: '会议记录计划',
					9: '上级发布计划',
					8: '备忘事项'
				}
				let classname = planClassInfo[planclass] || '';
				title = `我发布的${classname}`;
				this.jhText = classname
				this.disabledType = true;
			}

			// uni.setNavigationBarTitle({
			// 	title:title
			// })
			this.title = title;

			const userData = uni.getStorageSync('userData') || '';
			if (userData) {
				this.userData = JSON.parse(userData).Client;
			}

			// if(!this.positionList.length){
			//     this.getListFromAPI({vm:this,name:'positionList'})
			// }

			// if(!this.subdepartmentList.length){
			// 	const code = this.userData.SSJGBH;
			//     this.getListFromAPI({vm:this,name:'subdepartmentList',params:{SSJGBH:code}})
			// }

			//this.getXSSJList();
		},
		onShow() {
			this.goSearch()
		},
		methods: {
			//下拉菜单
			funSelect(val) {
				if (this.clickVal == val)
					this.selectPopShow = !this.selectPopShow;
				else
					this.selectPopShow = true;
				this.clickVal = val;
				console.log(this.clickVal);
				this.dropIdx = val - 2;
			},
			funSubSelect(val) {
				this.selectVal = val;
				this.selectPopShow = false;
				if (this.clickVal == 1) this.JHZT = val;
			},

			// ...mapActions(['getListFromAPI']),
			goSearch() { //搜索
				this.pageNum = 1;
				this.List = [];
				this.getList();
				// this.$refs.uDropdown.close();
			},
			// 统一返回筛选条件 查询条件 分页
			conditions() {
				var where = {};
				if (this.keyword != '') {
					where = {
						JHBT: this.keyword
					};
				}
				//	where.JHLX= this.JHLX;
				//where.JHZT= this.JHZT;

				this.searchData.page = this.pageNum;
				this.searchData.limit = this.pageSize;
				if (this.planType == '1') {
					//where.FBZT = this.FBZT;
				}
				if (this.planDateVal.length > 0) {
					where.JHStartTime = this.planDateVal[0] + ' 00:00:00';
					where.JHEndTime = this.planDateVal[1] + ' 23:59:59';
				}
				if (this.finishDateVal.length > 0) {
					where.CompletionStartTime = this.finishDateVal[0] + ' 00:00:00';
					where.CompletionEndTime = this.finishDateVal[1] + ' 23:59:59';
				}

				this.searchData.where = where;
				let data = this.searchData;
				var newData = this.$u.deepClone(data);
				if (data.where) {
					newData.where = JSON.stringify(data.where);
				}
				return newData;
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				/* let params = {
          JHBT: this.keyword,
          JHLX: this.JHLX || '',
          JHZT: this.JHZT || '',
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
        
				if(this.planType=='1'){
					params.FBZT = this.FBZT;
				}
				if(this.planDateVal.length>0){
					params.JHStartTime = this.planDateVal[0] + ' 00:00:00';
					params.JHEndTime = this.planDateVal[1] + ' 23:59:59';
				}
				if(this.finishDateVal.length>0){
					params.CompletionStartTime = this.finishDateVal[0] + ' 00:00:00';
					params.CompletionEndTime = this.finishDateVal[1] + ' 23:59:59';
				} */

				this.listStatus = 'loading';
				if (this.planType == '1') { //发布的计划
					this.$u.api.getGZJH(this.conditions()).then(res => {
						const datas = res.data || {};
						// this.List = [...this.List,...datas.model];
						this.List = [...this.List, ...datas];
						this.listCount = 10 // datas.num;
						// if(this.List.length >= this.listCount){
						this.listStatus = 'nomore';
						// }
						console.log(this.List.length)
						uni.hideLoading();
					}).catch(() => {})
				} else if (this.planType == 2) { //关联的计划
					this.$minApi.app._GetGRLGZJH(this.conditions()).then(res => {
						const datas = res.data || {};
						this.List = [...this.List, ...datas.model];
						this.listCount = datas.num;

						if (this.List.length >= this.listCount) {
							this.listStatus = 'nomore';
						}
						uni.hideLoading();
					}).catch(() => {})
				} else {

					// params.BMID = this.BMID || '';
					// params.YWYID = this.YWYID || '';
					// console.log(params)

					this.$u.api.getSubordinatePlan(this.conditions()).then(res => {
						const datas = res.data || {};
						this.List = [...this.List, ...datas.model];
						this.listCount = datas.num || 0;

						if (datas.model.length < this.pageSize) {
							this.listStatus = 'nomore';
						}

						uni.hideLoading();
					}).catch(() => {})
				}

			},
			changeStatus() {
				this.goSearch();
			},
			change(val) {
				this.goSearch();
			},
			open(index) {
				this.$refs.uDropdown.highlight();
				this.dropIdx = index;
			},

			open2(index) {
				this.$refs.uDropdown.highlight();
				this.dropIdx = index - 1;
			},


			onCancel() {
				if (this.dropIdx == '1' && this.planDateVal.length == 0) {
					this.planCur = '';
				}
				if (this.dropIdx == '2' && this.finishDateVal.length == 0) {
					this.finishCur = '';
				}
				this.selectVal = 0;
			},
			onConfirm(d) {
				this.selectPopShow = false;
				//	this.$refs.uDropdown.close();
				if (this.dropIdx == '1') { //计划时间
					this.planDateVal = d.value;
				}
				if (this.dropIdx == '2') { //完成时间
					this.finishDateVal = d.value;
				}
				this.goSearch();
			},
			selectDate(idx) {
				this.selectVal = idx + 2;
				if (this.dropIdx == '1') { //计划时间
					this.planCur = idx;
					this.rangeVal = this.planDateVal;
					if (idx == 1) {
						this.planDateVal = [];
					}
				}
				if (this.dropIdx == '2') { //完成时间
					this.finishCur = idx;
					this.rangeVal = this.finishDateVal;
					if (idx == 1) {
						this.finishDateVal = [];
					}
				}

				if (idx == 1) {
					this.goSearch();
					this.selectPopShow = false
				}
				if (idx == 2) {
					this.visible = true;
				}
			},

			selectSub(idx) {
				const arr = this.subdepartmentList || [];
				if (this.BMID == arr[idx].ID) {
					this.BMID = '';
				} else {
					this.BMID = arr[idx].ID;
				}
				this.goSearch();
			},
			selectSubPerson(index, idx) {
				const arr = this.subList || [];
				const items = arr[index].items || [];
				if (this.YWYID == items[idx].id) {
					this.YWYID = '';
				} else {
					this.YWYID = items[idx].id;
				}
				this.goSearch();
			},

			scrollBottom() {
				if (this.List.length < this.listCount) {
					++this.pageNum;
					this.getList();
				}
			},
			getLabelFromID(id) {
				const info = this.typeList.find(item => {
					return id == item.value;
				});
				if (info) {
					return info.label;
				}
				return '';
			},
			goDetail(id, t) {
				if (t == 4) {
					uni.navigateTo({
						url: `/packagePlan/pages/planDetailSub/index?id=${id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/member/agent/planDetail/index?id=${id}&planAuth=${t}`
					})
				}

			},
			getXSSJList() {
				this.$minApi.app._GetXSSJ().then(res => {
					this.subList = this._normalizeSinger(res.data.molist || []);
				}).catch(() => {})
			},
			_normalizeSinger(list) {
				let map = {};
				list.forEach((item, index) => {
					const key = item.index;
					if (!map[key]) {
						map[key] = {
							title: key,
							items: []
						}
					}

					map[key].items.push({
						name: item.KHJBXX.YGXM,
						id: item.KHJBXX.ID,
						SSZWBH: item.KHJBXX.SSZWBH
					})
				})
				let ret = [],
					hot = [];
				for (let key in map) {
					let val = map[key]
					if (val.title.match(/[a-zA-Z0-9]/)) {
						ret.push(val)
					}
				}
				ret.sort((a, b) => {
					return a.title.charCodeAt(0) - b.title.charCodeAt(0)
				})
				return hot.concat(ret)
			}
		}
	}
</script>

<style scoped lang="scss">
	.u-page {
		width: 100%;
		height: 100%;
		overflow: hidden;

		&::v-deep .u-cell {
			padding: 0 40rpx;
			font-size: 28rpx;
			color: #7A808A;
			line-height: 80rpx;
		}
	}

	.coreshop-flex-direction-row {
		/deep/.u-text {
			color: #606266 !important;
			font-size: 14px !important;
		}
	}

	.search-box {
		background-color: #fff;

		.search-input {
			padding: 30rpx 40rpx 20rpx;
		}
	}

	.content {
		overflow: hidden;
	}

	.select-tag {
		margin: 20rpx 40rpx;
		font-size: 24rpx;
		color: #2A8FFC;
		background-color: #DEEDFC;
		border: 1px solid #2A8FFC;
		border-radius: 10rpx;
		line-height: 48rpx;
		text-align: center;
	}

	.list-head {
		padding: 0 18rpx;

		.head-title {
			font-size: 32rpx;
			color: #333333;
			line-height: 50rpx;
			margin-top: 10rpx;
		}

		.complete-num {
			font-size: 28rpx;
			color: $core-type-primary-dark;
			margin-left: 10rpx;
		}

		.head-time {
			font-size: 27rpx;
			color: #999;
		}
	}

	.list-body {
		font-size: 24rpx;
		padding: 15rpx 18rpx;

		.list-content {
			overflow: hidden;
			color: #666;
			margin-right: 40rpx;

			.plan-info {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.msg-num {
			color: #C0C0C0;
			margin-left: 6rpx;
		}
	}


	.select-time-list {
		height: 80rpx;
		border-top: 1px solid #f3f6fb;
		padding: 0 50rpx 0 40rpx;
		font-size: 28rpx;
		color: #7A808A;

		&.active {
			color: #2A8FFC;
			position: relative;

			&::after {
				content: '\e703';
				font-family: 'custom-icon';
				position: absolute;
				right: 50rpx;
				top: 50%;
				margin-top: -20rpx;
				font-size: 40rpx;
			}
		}
	}

	.add-btn {
		width: 80rpx;
		height: 80rpx;
		background-color: $core-type-primary-dark;
		text-align: center;
		line-height: 90rpx;
		border-radius: 50%;
		position: fixed;
		right: 50rpx;
		bottom: 80rpx;
		z-index: 10;
	}

	.sub-client-content {
		background-color: #fff;
		text-align: center;

		.active {
			color: $core-type-primary-dark;
		}

		.sub-content-box {
			font-size: 24rpx;

			&:nth-child(1) {
				.sub-content {
					.title-icon {
						text {
							display: block;
						}
					}
				}
			}

			.sub-content {
				text-align: left;
				width: 100%;

				.title-icon {
					width: 100rpx;
					text-align: center;

					text {
						width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						display: none;
						background: $core-type-primary-dark;
						color: #fff;
						border-radius: 50%;
						margin: 0 auto;
						font-size: 24rpx;
					}
				}
			}
		}

	}

	.disabled {
		opacity: 0.5;
		/* 示例：使元素看起来不可点击 */
		pointer-events: none;
		/* 阻止点击事件 */
	}

	.uCard {
		border: 1px solid #F7F7F7;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		min-height: 248rpx;
		margin: 20rpx 20rpx 0 20rpx;
	}

	.cardShow {
		opacity: 1;
		pointer-events: all;
	}

	.cardNone {
		opacity: 0.1;
		pointer-events: none;
	}
</style>